﻿@model IList<ProductDetailsModel.ProductAttributeModel>
@{
    //dynamic update support
    var attributeChangeScriptsBuilder = new StringBuilder();
    var bundleProductId = ViewData["BundleProductId"]?.ToString();
    var productId = ViewData["ProductId"]?.ToString();
    const string format = "attribute_change_handler_{0}";
    var attributeChangeHandlerFuncName = string.Format(format, productId);
    //generate change event script
    foreach (var attribute in Model)
    {
        var controlId = $"product_attribute_{attribute.Id}";
        switch (attribute.AttributeControlType)
        {
            case AttributeControlType.DropdownList:
            {
                attributeChangeScriptsBuilder.Append($"document.querySelector('#{controlId}').addEventListener('change', function (){{{attributeChangeHandlerFuncName}();}});\n");
            }
                break;
            case AttributeControlType.RadioList:
            case AttributeControlType.ColorSquares:
            case AttributeControlType.ImageSquares:
            {
                foreach (var attributeValue in attribute.Values)
                {
                    attributeChangeScriptsBuilder.Append($"document.querySelector('#{controlId}_{attributeValue.Id}').addEventListener('click',function(e){{{attributeChangeHandlerFuncName}();}},false);\n");
                }
            }
                break;
            case AttributeControlType.Checkboxes:
            case AttributeControlType.ReadonlyCheckboxes:
            {
                foreach (var attributeValue in attribute.Values)
                {
                    attributeChangeScriptsBuilder.Append($"document.querySelector('#{controlId}_{attributeValue.Id}').addEventListener('click',function(e){{{attributeChangeHandlerFuncName}();}},false);\n");
                }
            }
                break;
        }
    }

    //render scripts
    <script asp-location="Footer" asp-order="300">
        function @(attributeChangeHandlerFuncName)() {
            var form = document.getElementById('product-details-form');
            var data = new FormData(form);
            axios({
                url: '@Html.Raw(Url.Action("productdetails_attributechange", "product", new { productId = bundleProductId, loadPicture = true }))',
                data: data,
                method: 'post',
                params: { product: '@bundleProductId' },
            }).then(function (response, url) {
                @*TODO*@
                if (response.data.price) {
                    document.querySelector('.price-value-@bundleProductId').innerText = response.data.price;
                }
            });
        }        
        Vue.component('product-attributes-bundle-@(productId)', {
            template: '#product-attributes-bundle',
            data() {
                return { productAttributes: @Json.Serialize(Model)}
            },
            mounted() {
                @(attributeChangeHandlerFuncName)();
                @Html.Raw(attributeChangeScriptsBuilder.ToString());
            }
        });

    </script>
}
<div id="product-attributes">
    <product-attributes-bundle-@(productId)></product-attributes-bundle-@(productId)>
</div>